<template>
	<view>
		<photoPage v-if="PageCur=='photoPage'"></photoPage>
		<searchPage v-show="PageCur=='searchPage'" :voice.sync='voiceResult'></searchPage>
		<gamePage v-if="PageCur=='gamePage'"></gamePage>
		<discover v-if="PageCur=='discover'"></discover>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange" data-cur="photoPage">
				<view class='cuIcon-cu-image'>
					<text class="cuIcon-camera lg" :class="PageCur=='photoPage'?'nav-selected':'text-gray'"></text>
				</view>
				<view :class="PageCur=='photoPage'?'nav-selected':'text-gray'">拍照搜</view>
			</view>
			<view class="action" @click="NavChange" data-cur="searchPage">
				<view class='cuIcon-cu-image'>
					<text class="cuIcon-search lg" :class="PageCur=='searchPage'?'nav-selected':'text-gray'"></text>
				</view>
				<view :class="PageCur=='searchPage'?'nav-selected':'text-gray'">检索</view>
			</view>
			<view>
				<button class="cu-btn text-lg voice-btn" style="background-color: #52B788" @touchstart="streamRecord"
					@touchend="streamRecordEnd">
					<text class="cuIcon-voice"></text>
				</button>
			</view>

			<view class="action" @click="NavChange" data-cur="gamePage">
				<view class='cuIcon-cu-image'>
					<text class="cuIcon-game lg" :class="PageCur=='gamePage'?'nav-selected':'text-gray'"></text>
				</view>
				<view :class="PageCur=='gamePage'?'nav-selected':'text-gray'">小游戏</view>
			</view>
			<view class="action" @click="NavChange" data-cur="discover">
				<view>
					<text class="cuIcon-discover lg" :class="PageCur=='discover'?'nav-selected':'text-gray'"></text>
				</view>
				<view :class="PageCur=='discover'?'nav-selected':'text-gray'">发现</view>
			</view>
		</view>
	</view>
</template>

<script>
	const plugin = requirePlugin("WechatSI")
	const manager = plugin.getRecordRecognitionManager()

	const bus = getApp().globalData.bus

	export default {
		data() {
			return {
				PageCur: 'photoPage',
				voiceResult: ''
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			initRecord() {
				manager.onRecognize = (res) => {
					this.currentText = res.result
				}
				manager.onStop = (res) => {
					let text = res.result
					if (res.duration < 1000) {
						wx.showToast({
							title: "录音时间太短",
							icon: "error",
							duration: 1000
						});
						return
					}
					if (text == '') {
						wx.showModal({
							title: '没有结果',
							content: '请再说一次'
						})
						return
					}
					this.voiceResult = text.replace('。', '')
					this.PageCur = 'searchPage'
					bus.emit('join', this.voiceResult)
				}
			},
			streamRecord(e) {
				let that = this;
				manager.start({
					duration: 30000,
					lang: 'zh_CN',
				})
				wx.showToast({
					title: "正在录音",
					icon: 'loading',
					duration: 30000
				});
			},
			streamRecordEnd() {
				wx.hideToast()
				manager.stop()
			}
		},
		created() {
			this.initRecord()
		}
	}
</script>

<style>
	.nav-selected {
		color: #99d98c;
	}

	.cu-bar {
		min-height: 115rpx;
	}

	.cu-bar.tabbar .action {
		font-size: 26rpx;
	}

	.voice-btn {
		padding: 30upx;
		border-radius: 50%;
		height: 70px;
		width: 70px;
	}

	.voice-btn text {
		font-size: 2rem;
		color: #fff;
	}
</style>